<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="!form.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="上级区域">
            <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :load-options="loadOptions" placeholder="选择上级区域" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="区域编码" prop="divisionCode">
        <el-input v-halfCharCode v-model="form.divisionCode" placeholder="请输入区域编码" />
      </el-form-item>
      <el-form-item label="区域名称" prop="divisionName">
        <el-input v-halfCharCode v-model="form.divisionName" placeholder="请输入区域名称" />
      </el-form-item>
      <el-form-item label="区域级别" prop="divisionLevel">
        <el-select clearable v-model="form.divisionLevel" placeholder="请选择区域级别">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDict } from '~/utils'
import { addObj, getDivision, getObj, putObj, getObjByCode } from '@/admin/api/division'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
  name: "Menu",
  components: { Treeselect },
  data () {
    return {
      data: [],
      options: getDict('DIVISION_LEVEL'),
      // 遮罩层
      loading: true,
      // 菜单树选项
      menuOptions: [],
      // 是否显示弹出层
      visible: false,
      form: {
        parentId: '',
        id: '',
        divisionName: '',
        divisionLevel: '',
        divisionCode: '',
        hasChildren: true
      },
      // 表单校验
      rules: {
        divisionName: [
          { required: true, message: "区域名称不能为空", trigger: "blur" }
        ],
        divisionCode: [
          { required: true, message: "区域编码不能为空", trigger: "blur" }
        ],
        divisionLevel: [
          { required: true, message: "区域级别不能为空", trigger: "blur" }
        ],
      }
    }
  },
  created () {
  },
  methods: {
    loadOptions ({ action, parentNode, callback, instanceId }) {
      this.data = [];
      getDivision({ lazy: true, parentId: parentNode.divisionCode }).then(response => {
        this.data = response.data.data
        this.data.map(el => {
          for (let key in el) {
            el.id = el.divisionCode,
              el.label = el.divisionName
          }
        })
        parentNode.children = this.data
        callback()
      })

    },

    init (isEdit, data) {
      this.options = getDict('DIVISION_LEVEL');

      this.visible = true
      this.getTreeselect(data, isEdit)
      this.$nextTick(() => {
        if (isEdit) {
          getObj(data.id).then(response => {
            let res = response.data
            this.form = {
              parentId: res.data.parentCode,
              id: res.data.divisionId,
              divisionName: res.data.divisionName,
              divisionLevel: res.data.divisionLevel,
              divisionCode: res.data.divisionCode,
              hasChildren: true,
            }

          })
        } else {
          this.form = {
            parentId: this.form.parentId,
            id: '',
            divisionName: '',
            divisionLevel: '',
            divisionCode: '',
            hasChildren: true
          }
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.form.parentId === undefined) {
            this.form.parentCode = '000000'
          } else {
            this.form.parentCode = this.form.parentId
          }
          if (this.form.id) {
            this.form.divisionId = this.form.id
            putObj(this.form).then(data => {
              this.$message.success('修改成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          } else {
            addObj(this.form).then(data => {
              this.$message.success('添加成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          }
        }
      })
    },
    /** 查询区域下拉树结构 */
    getTreeselect (data, isEdit) {

      let divisionCode = ''
      let divisionName = ''
      if (data) {

        if (isEdit) {
          divisionCode = data.parentId
          getObjByCode(data.parentId).then(resp => {
            divisionName = resp.data.data.divisionName
            this.getDivision(divisionCode, divisionName)
            this.form.parentId = data.parentId
          })

        } else {
          divisionCode = data.divisionCode
          divisionName = data.divisionName
          this.getDivision(divisionCode, divisionName)
          this.form.parentId = data.divisionCode
        }
        this.form.id = data.id
      } else {
        divisionCode = '000000'
        divisionName = '中国'
        this.getDivision(divisionCode, divisionName)
        this.form.parentId = '000000'
      }

    },

    getDivision (divisionCode, divisionName) {
      getDivision({ lazy: true, parentId: divisionCode }).then(response => {
        this.menuOptions = []
        const menu = { divisionCode: divisionCode, divisionName: divisionName, children: [] }
        menu.children = response.data.data
        this.menuOptions.push(menu)
      })
    },


    /** 转换区域数据结构 */
    normalizer (node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.divisionCode,
        label: node.divisionName,
        children: node.children
      }
    }
  }
}
</script>
